<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>环状图</title>
   <script src="../js/echarts.js"></script>
   <script src="../js/jquery-3.2.1/jquery-3.2.1.js"></script>
   <link rel="stylesheet" href="../js/layui/css/layui.css">
    <script src="../js/layui/layui.js"></script>
   <style type="text/css">
		.chats{
			width: 48%;
			height:300px;
			float:left;
			margin-top: 2%;
			margin-left:1%
		}		
    		
   </style>
</head>
<body>

     <div id="main"  class="chats" ></div>
     <div id="main1" class="chats" ></div>
     <div id="main2" class="chats" ></div>
	 <div id="main3" class="chats" ></div>
<script type="text/javascript">
layui.use('layer', function(){
    var layer = layui.layer;
});
        $(function(){
        	
        	var myChart = echarts.init(document.getElementById('main'));
            var myChart1 = echarts.init(document.getElementById('main1'));
            var myChart2 = echarts.init(document.getElementById('main2'));
     		var myChart3 = echarts.init(document.getElementById('main3'));
            // 显示标题，图例和空的坐标轴
            
     		myChart.showLoading();    //数据加载完之前先显示一段简单的loading动画 */
            
            $.ajax({
            	
    			type:"POST",
    			contentType:'application/json;charset=UTF-8',//关键是要加上这行
    	        //traditional:true,//这使json格式的字符不会被转码
    	        dataType:"json",
    	        async:true,
	           	data : {},
	           	url:"../echats/listSalary.do",
	                 //返回数据形式为json
	           	success:function(data){
	          		console.log(data);
	               //请求成功时执行该函数内容，result即为服务器返回的json对象
	               if(data) {
	                      myChart.hideLoading();    //隐藏加载动画
	                      $.each(data,function(key,val){
	                    	  option1 ={        //加载数据图表
		                    	  title: {
		                    	        text: '差旅费用'
		                    	    },
		                    	    tooltip: {
		                    	        trigger: 'item',
		                    	        formatter: "{a} <br/>{b}: {c} ({d}%)"
		                    	    },
		                    	    legend: {
		                    	        orient: 'vertical',
		                    	        x: 'right',
		                    	        data:['已用','在途','剩余']
		                    	    },
		                    	    series: [
		                    	        {
		                    	            name:'访问来源',
		                    	            type:'pie',
		                    	            radius: ['50%', '70%'],
		                    	            avoidLabelOverlap: false,
		                    	            label: {
		                    	                normal: {
		                    	                    show: false,
		                    	                    position: 'right'
		                    	                },
		                    	                emphasis: {
		                    	                    show: true,
		                    	                    textStyle: {
		                    	                        fontSize: '30',
		                    	                        fontWeight: 'bold'
		                    	                    }
		                    	                }
		                    	            },
		                    	            labelLine: {
		                    	                normal: {
		                    	                    show: false
		                    	                }
		                    	            },
		                    	            data:[
		                    	              
		                    	                {value:val.applySalary, name:'已用'},
		                    	                {value:val.applyIngSalary, name:'在途'},
		                    	                {value:val.surplusSalary, name:'剩余'},
		                    	               
		                    	            ]
		                    	        }
		                    	    ]
		                      }; 
		                      
		              
		            });
	                      myChart.setOption(option1);      
	               }
	                  
	          },
	           error : function(errorMsg) {
	               //请求失败时执行该函数
	           layer.msg("图表请求数据失败!");
	           myChart.hideLoading();
	           },
	      });
             
            
            
 			$.ajax({
            	
    			type:"POST",
    			contentType:'application/json;charset=UTF-8',//关键是要加上这行
    	        //traditional:true,//这使json格式的字符不会被转码
    	        dataType:"json",
    	        async:true,
	           	data : {},
	           	url:"../echats/listSalaryProperty.do",
	                 //返回数据形式为json
	           	success:function(data){
	          		console.log(data);
	               //请求成功时执行该函数内容，result即为服务器返回的json对象
	               if(data) {
	                      myChart.hideLoading();    //隐藏加载动画
	                      $.each(data,function(key,val){
	                    	  option2 ={        //加载数据图表
		                    	  title: {
		                    	        text: '物业费用'
		                    	    },
		                    	    tooltip: {
		                    	        trigger: 'item',
		                    	        formatter: "{a} <br/>{b}: {c} ({d}%)"
		                    	    },
		                    	    legend: {
		                    	        orient: 'vertical',
		                    	        x: 'right',
		                    	        data:['已用','在途','剩余']
		                    	    },
		                    	    series: [
		                    	        {
		                    	            name:'访问来源',
		                    	            type:'pie',
		                    	            radius: ['50%', '70%'],
		                    	            avoidLabelOverlap: false,
		                    	            label: {
		                    	                normal: {
		                    	                    show: false,
		                    	                    position: 'right'
		                    	                },
		                    	                emphasis: {
		                    	                    show: true,
		                    	                    textStyle: {
		                    	                        fontSize: '30',
		                    	                        fontWeight: 'bold'
		                    	                    }
		                    	                }
		                    	            },
		                    	            labelLine: {
		                    	                normal: {
		                    	                    show: false
		                    	                }
		                    	            },
		                    	            data:[
		                    	              
		                    	                {value:val.applySalary, name:'已用'},
		                    	                {value:val.applyIngSalary, name:'在途'},
		                    	                {value:val.surplusSalary, name:'剩余'},
		                    	               
		                    	            ]
		                    	        }
		                    	    ]
		                      }; 
		                      
		              
		            });
	                      myChart1.setOption(option2);      
	               }
	                  
	          },
	           error : function(errorMsg) {
	               //请求失败时执行该函数
	           layer.msg("图表请求数据失败!");
	           myChart.hideLoading();
	           },
	      });

 			 $.ajax({
             	
     			type:"POST",
     			contentType:'application/json;charset=UTF-8',//关键是要加上这行
     	        //traditional:true,//这使json格式的字符不会被转码
     	        dataType:"json",
     	        async:true,
 	           	data : {},
 	           	url:"../echats/listSalaryStaff.do",
 	                 //返回数据形式为json
 	           	success:function(data){
 	          		console.log(data);
 	               //请求成功时执行该函数内容，result即为服务器返回的json对象
 	               if(data) {
 	                      myChart.hideLoading();    //隐藏加载动画
 	                      $.each(data,function(key,val){
 	                    	  option3 ={        //加载数据图表
 		                    	  title: {
 		                    	        text: '员工福利'
 		                    	    },
 		                    	    tooltip: {
 		                    	        trigger: 'item',
 		                    	        formatter: "{a} <br/>{b}: {c} ({d}%)"
 		                    	    },
 		                    	    legend: {
 		                    	        orient: 'vertical',
 		                    	        x: 'right',
 		                    	        data:['已用','在途','剩余']
 		                    	    },
 		                    	    series: [
 		                    	        {
 		                    	            name:'访问来源',
 		                    	            type:'pie',
 		                    	            radius: ['50%', '70%'],
 		                    	            avoidLabelOverlap: false,
 		                    	            label: {
 		                    	                normal: {
 		                    	                    show: false,
 		                    	                    position: 'right'
 		                    	                },
 		                    	                emphasis: {
 		                    	                    show: true,
 		                    	                    textStyle: {
 		                    	                        fontSize: '30',
 		                    	                        fontWeight: 'bold'
 		                    	                    }
 		                    	                }
 		                    	            },
 		                    	            labelLine: {
 		                    	                normal: {
 		                    	                    show: false
 		                    	                }
 		                    	            },
 		                    	            data:[
 		                    	              
 		                    	                {value:val.applySalary, name:'已用'},
 		                    	                {value:val.applyIngSalary, name:'在途'},
 		                    	                {value:val.surplusSalary, name:'剩余'},
 		                    	               
 		                    	            ]
 		                    	        }
 		                    	    ]
 		                      }; 
 		                      
 		              
 		            });
 	                      myChart2.setOption(option3);      
 	               }
 	                  
 	          },
 	           error : function(errorMsg) {
 	               //请求失败时执行该函数
 	           layer.msg("图表请求数据失败!");
 	           myChart.hideLoading();
 	           },
 	      });

        
 			 $.ajax({
             	
     			type:"POST",
     			contentType:'application/json;charset=UTF-8',//关键是要加上这行
     	        //traditional:true,//这使json格式的字符不会被转码
     	        dataType:"json",
     	        async:true,
 	           	data : {},
 	           	url:"../echats/listSalaryOfficial.do",
 	                 //返回数据形式为json
 	           	success:function(data){
 	          		console.log(data);
 	               //请求成功时执行该函数内容，result即为服务器返回的json对象
 	               if(data) {
 	                      myChart.hideLoading();    //隐藏加载动画
 	                      $.each(data,function(key,val){
 	                    	  option4 ={        //加载数据图表
 		                    	  title: {
 		                    	        text: '交通费用'
 		                    	    },
 		                    	    tooltip: {
 		                    	        trigger: 'item',
 		                    	        formatter: "{a} <br/>{b}: {c} ({d}%)"
 		                    	    },
 		                    	    legend: {
 		                    	        orient: 'vertical',
 		                    	        x: 'right',
 		                    	        data:['已用','在途','剩余']
 		                    	    },
 		                    	    series: [
 		                    	        {
 		                    	            name:'访问来源',
 		                    	            type:'pie',
 		                    	            radius: ['50%', '70%'],
 		                    	            avoidLabelOverlap: false,
 		                    	            label: {
 		                    	                normal: {
 		                    	                    show: false,
 		                    	                    position: 'right'
 		                    	                },
 		                    	                emphasis: {
 		                    	                    show: true,
 		                    	                    textStyle: {
 		                    	                        fontSize: '30',
 		                    	                        fontWeight: 'bold'
 		                    	                    }
 		                    	                }
 		                    	            },
 		                    	            labelLine: {
 		                    	                normal: {
 		                    	                    show: false
 		                    	                }
 		                    	            },
 		                    	            data:[
 		                    	              
 		                    	                {value:val.applySalary, name:'已用'},
 		                    	                {value:val.applyIngSalary, name:'在途'},
 		                    	                {value:val.surplusSalary, name:'剩余'},
 		                    	               
 		                    	            ]
 		                    	        }
 		                    	    ]
 		                      }; 
 		                      
 		              
 		            });
 	                      myChart3.setOption(option4);      
 	               }
 	                  
 	          },
 	           error : function(errorMsg) {
 	               //请求失败时执行该函数
 	           layer.msg("图表请求数据失败!");
 	           myChart.hideLoading();
 	           },
 	      });

         



        });
        
       
</script>
    
  
</body>
</html>
